<template>
	<div id="container">
	    <div id="header">
	      <div id="logo">
	          <img src="../assets/logo.png">
	      </div>
	      <div id="title">
	          <h3>狗眼电影</h3>
	          <p>查影讯，上狗眼电影就够了！</p>
	      </div>
	      <div id="btn">
	        <a href="">请输入电影名</a>
	      </div>
	    </div>
	    <div id="top">
	      <a href=""><router-link to="/inTheaters" class="v-nav">正在热映</router-link></a><a href=""><router-link to="/comingSoon" class="v-nav">即将上映</router-link></a>
	    </div>
	    <div class="come-soon">
    <div class="co-theaters-area">
      <div class="co-movies-wrap" >
        <div class="co-movies-show" v-for="(item, index) in comingSoon" @click="showMoreMsg(item.id)">
          <div class="co-movies-show-child">
            <div class="co-posters"><img :src="item.images.small" :alt="item.alt"></div>
            <div class="co-movieMsg">
              <h2>{{ item.title }}</h2>
              <p>导演: {{ item.directors[0].name}}</p>
              <p>
                主演:{{ item.casts[0].name}}
                <span v-if="item.casts[1]">, {{ item.casts[1].name }}</span>
              </p>
              <p>类型: {{item.genres.join(', ')}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
</template>
<script>
export default {
  name: 'comingSoon',
  data () {
    return {
      comingSoon:[
    
      ]
    }
  },
  components: {

  },
  mounted: function () {
    this.$http.jsonp('https://api.douban.com/v2/movie/coming_soon').then(function (response) {
          this.comingSoon = response.body.subjects
        })
  },
  methods: {
    showMoreMsg: function (id) {
      const path = '/movie/' + id
      this.$router.push({path: path})
    }
  }
}
</script>
<style scoped>
a{
  text-decoration: none;
}
li{
  list-style: none;
}
#container{
}
#header{
  height: 40px;
  background: #e5e9f2;
  padding: 10px 20px;
}
#logo{
  float: left;
}
#logo img{
  height: 42px;
  width: 42px;
}
#title{
  float: left;
  margin-left: 5px;
}
#title h3{
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
#title p{
  font-size: 12px;
  color: #999;
}
#btn{
  position: absolute;
  right: 20px;
  display: inline-block;
  float: right;
  width: 100px;
  border: 0px solid #333;
  border-radius: 15px;
  height: 40px;
  background-color: #fff;
}
#btn a{
  padding-left: 10px;
  font-size: 12px;
  line-height: 40px;
  color: #999;
}
#top{
  height: 35px;
  background-color: #df2d2d;
}
#top a{
  width: 50%;
  text-align: center;
  display: inline-block;
  color: #f9fafc;
  font-size:20px;
  line-height: 35px; 
}
.co-movies-wrap {
    text-decoration: none;
    font-size: 0;
  }
  .co-movies-show {
    background-color: #f8f8f8;
    cursor: pointer;
    font-size: 0;
    padding: 10px 20px;
  }
  .co-movies-show-child {
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    border-bottom: 1px solid #d6d6d6;
  }
  .co-movieMsg {
    flex: 1;
    padding-left: 20px;
    vertical-align: top;
  }
  .co-movieMsg h2 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .co-movies-show p {
    font-size: 14px;
    color: #666;
  }
</style>